<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width="800"
    :visible="visible"
    title="详情"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <a-descriptions bordered :column="2" size="default">
      <a-descriptions-item label="设备ID">{{ form.recordId }}</a-descriptions-item>
      <a-descriptions-item label="上报时间">{{ form.createTime }}</a-descriptions-item>
      <a-descriptions-item label="温度">{{ form.temperature }} ℃</a-descriptions-item>
      <a-descriptions-item label="湿度">{{ form.humidity }} %RH</a-descriptions-item>
      <a-descriptions-item label="温热指数" :span="2">{{ form.thi }}</a-descriptions-item>
      <a-descriptions-item label="甲烷浓度">{{ form.methane }} ppm</a-descriptions-item>
      <a-descriptions-item label="光照">{{ form.beam }} lux</a-descriptions-item>
      <a-descriptions-item label="风向">{{  form.windD }}</a-descriptions-item>
      <a-descriptions-item label="风速">{{ form.windSpeed }} m/s</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script>
import { reactive, toRefs, watchEffect } from 'vue';

export default {
  name: 'DeviceEnvControlDataDetail',
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 详情数据
    data: Object
  },
  setup(props, context) {
    const data = reactive({
      form: {}
    });

    const watch = watchEffect(() => {
      if (props.data) {
        data.form = Object.assign({}, props.data);
        let windD = '未知';
        if (data.form.windSpeed > 0) {
          if (data.form.windDirection == 0) {
            windD = '北风';
          } else if (data.form.windDirection == 1) {
            windD = '东北风';
          } else if (data.form.windDirection == 2) {
            windD = '东风';
          } else if (data.form.windDirection == 3) {
            windD = '东南风';
          } else if (data.form.windDirection == 4) {
            windD = '南风';
          } else if (data.form.windDirection == 5) {
            windD = '西南风';
          } else if (data.form.windDirection == 6) {
            windD = '西风';
          } else if (data.form.windDirection == 7) {
            windD = '西北风';
          }
        }
        data.form.windD = windD;
      }
    });

    const updateVisible = value => {
      context.emit('update:visible', value);
    };

    return {
      ...toRefs(data),
      watch,
      updateVisible
    };
  }
};
</script>

<style scoped></style>
